<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <title>Volcreate - blog</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/lib/typo/typo.css">
    <link rel="stylesheet" href="../static/lib/animate/animate.css">
    <link rel="stylesheet" href="../static/lib/prism/prism.css">
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css">
    <link rel="stylesheet" href="../static/css/mine.css">
</head>

<body>

<!--导航-->
<nav th:replace="_fragments :: menu(3)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
    <!--tb : top and bottom-->
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">Volcreate</h2>
            <!--icon的地址-->
            <!--https://semantic-ui.com/elements/icon.html#interfaces-->
            <a href="index.html" class="m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
            <a href="category.html" class="m-item item m-mobile-hide"><i class="idea icon"></i>博客筛选</a>
            <a href="blogs.html" class="m-item item m-mobile-hide"><i class="blogger icon"></i>博客</a>
            <a href="archive.html" class="m-item item m-mobile-hide"><i class="clone icon"></i>归档</a>
            <a href="more.html" class="m-item item m-mobile-hide"><i class="bars icon"></i>更多</a>
            <a href="about.html" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>

            <div class="right m-item item m-mobile-hide">
                <div class="ui inverted transparent m-padded-tb-small input icon">
                    <input type="text" placeholder="Search....">
                    <i class="search link icon"></i>
                </div>
            </div>

        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>

<!--中间内容-->
<!--<div id="waypoint" class="m-container m-padded-tb-big animated pulse">-->
<div class="m-container m-padded-tb-big animated pulse">
    <div class="ui container">

        <!--head,info-->
        <div class="ui top attached segment">
            <div class="ui horizontal link list">
                <!--personality-->
                <div class="item">
                    <!--portraits-->
                    <img src="../static/images/avatar/a1.jpeg" alt="" class="ui avatar image"
                         th:src="@{${blog.user.avatar}}">
                    <!--name-->
                    <a href="#" class="author" th:text="${blog.user.nickname}">zxc1223</a>
                </div>
                <!--calendar-->
                <div class="item"><i class="calendar icon"></i><span
                        th:text="|  ${#dates.format(blog.gmtModified,'yyyy-MM-dd')}|">2020-8-17更新时间</span></div>
                <!--times-->
                <div class="item"><i class="eye icon"></i><span th:text="|  ${blog.views}|">1234浏览次数</span></div>
            </div>
        </div>

        <!--image-->
        <div class="ui attached segment">
            <img src="https://picsum.photos/id/230/800/450" alt="" class="ui fluid rounded image"
                 th:src="@{${blog.firstPicture}}">
        </div>

        <!--content-->
        <div class="ui attached padded segment">

            <!--type-->
            <div class="ui right aligned basic segment">
                <div class="ui orange basic label" th:text="${blog.flag}">原创</div>
            </div>
            <!--title-->
            <h2 class="ui center aligned header" th:text="${blog.title}">macOS 快捷键</h2>
            <!--text-->
            <div class="typo typo-selection js-toc-content m-padded-lr-responsive m-padded-tb-large" id="content"
                 th:utext="${blog.content}">

                <p class="typo-first">排版是一个麻烦的问题 <sup><a href="#"># 附录一</a></sup>，需要精心设计，而这个设计却是常被视觉设计师所忽略的。前端工程师更常看到这样的问题，但不便变更。因为在多个
                    OS 中的不同浏览器渲染不同，改动需要多的时间做回归测试，所以改变变得更困难。而像我们一般使用的
                    Yahoo、Eric Meyer 和 Alice base.css 中采用的 Reset 都没有很好地考虑中文排版。<i class="serif">Typo.css</i>
                    要做的就是解决中文排版的问题。</p>
                <pre><code class="language-css">p { color: red }</code></pre>
                <h1 id="section1">123</h1>
                <h2 id="section2">223</h2>
                <h3 id="section3">321</h3>

            </div>
            <!--label-->
            <div class="ui m-padded-lr-responsive basic segment ">
                <div class="ui blue basic left pointing label m-margin-tb-tiny" th:each="tag : ${blog.tags}"
                     th:text="${tag.name}">macOS
                </div>
            </div>
            <!--            <div>-->
            <!--                <span>点赞数：</span>-->
            <!--            </div>-->

            <!--喜欢,赞赏,关注,收藏-->
            <div class="ui center aligned basic segment m-padded-tb-mini m-padded-lr-responsive">
                <div id="likeInterval"></div>
                <div class="ui horizontal list">
                    <div class="item">
                        <button id="like" class="ui left aligned orange basic button" data-inverted=""
                                data-tooltip="like you"><span id="likeCount" th:text="${blog.like}">2</span> 👍赞
                        </button>
                    </div>
                    <div class="item" th:if="${session.user}!=null">
                        <button id="love" class="ui left aligned orange basic circular button" data-inverted=""
                                data-tooltip="love you">关注❤️
                        </button>
                    </div>
                    <div class="item" th:if="${session.user}!=null">
                        <button id="favorite" class="ui left aligned orange basic circular button" data-inverted=""
                                data-tooltip="marry you">收藏🎎
                        </button>
                    </div>
                    <div class="item" th:if="${blog.appreciative}">
                        <button id="payButton" class="ui orange basic circular button">赞赏💰</button>
                        <!--赞赏图片，支付宝，微信-->
                        <div class="ui payQR top flowing popup transition hidden">
                            <div class="ui orange basic label">
                                <div class="ui images" style="font-size: inherit !important;">
                                    <div class="image">
                                        <img src="../static/images/bk1.jpeg" th:src="@{#{pay.weixin}}" alt=""
                                             class="ui rounded bordered image"
                                             style="width: 120px">
                                        <div>微信支付</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!--message-->
        <div class="ui attached positive message" th:if="${blog.shareStatement}">
            <!--personal info-->
            <div class="ui middle aligned grid">
                <div class="eleven wide column">
                    <ul class="list">
                        <li><span th:text="${blog.user.nickname}">作者</span><a href="#" th:href="@{/about}"
                                                                              target="_blank" style="color: #0C1021">(联系作者)</a>
                        </li>
                        <li> 发表时间: <span
                                th:text="|  ${#dates.format(blog.gmtCreate,'yyyy-MM-dd HH:mm:ss')}|">2020-8-18</span>
                        </li>
                        <li>版权声明:</li>
                        <li>公众号转载:</li>
                    </ul>
                </div>

                <div class="five wide column">
                    <img src="../static/images/bk2.jpeg" th:src="@{/images/bk1.jpeg}" alt=""
                         class="ui right floated rounded bordered image"
                         style="width: 120px">
                </div>

            </div>
        </div>

        <!--bottom.comment-->
        <div class="ui bottom attached segment">
            <!--reply-->
            <!--利用ajax动态刷新-->
            <span th:if="!${blog.commentable}">评论已关闭</span>


            <!--comment-submit-->
            <div id="comment-form" class="ui form" th:if="${blog.commentable}">

                <input type="hidden" name="blog.commentable" th:value="${blog.commentable}">
                <!--blog的id-->
                <input type="hidden" name="blog.id" th:value="${blog.id}">
                <!--root节点id-->
                <input type="hidden" name="rootCommentId" value="-1">
                <input type="hidden" name="parentCommentId" value="-1">
                <!--评论内容-->
                <div class="filed">
                    <textarea id="textaream" name="content" placeholder="别拦我，我要评论..."></textarea>
                </div>
                <!--发布-->
                <div class="fields m-padded-top">
                    <div class="field m-margin-bottom-small m-mobile-wide  middle aligned">
                        <button id="comment-submit-btn" type="button"
                                class="ui black button m-mobile-wide  middle aligned"><i
                                class="edit icon"></i>发布
                        </button>
                        <span th:if="${session.user}==null">未登录、您将会被随机分配一个游客账户</span>
                    </div>
                </div>
            </div>
            <!--comment-list-->
            <div id="comment-container" class="ui segment">

                <div th:fragment="commentList">
                    <div class="ui threaded comments" style="max-width: 100%">
                        <h3 class="ui dividing header">评论</h3>
                        <!--   a comment   -->
                        <div class="comment" th:each="comment : ${comments}">
                            <a class="avatar">
                                <img src="https://picsum.photos/id/243/100/100" alt=""
                                     th:src="@{${comment.user.avatar}}">
                            </a>
                            <div class="content">
                                <a class="author">
                                    <span th:text="${comment.user.nickname}">Jack</span>
                                    <div class="ui mini basic red left pointing label m-padded-tb-mini"
                                         th:if="${comment.user.type} != 10">
                                        <span class="m-color-admin">博主</span>
                                    </div>
                                </a>
                                <div class="metadata">
                                    <span class="date"
                                          th:text="|  ${#dates.format(comment.gmtCreate,'yyyy-MM-dd HH:mm:ss')}|">Today at 5:42PM</span>
                                </div>
                                <div class="text" th:text="${comment.content}">
                                    How artistic!
                                </div>
                                <div class="actions">
                                    <a class="reply" data-commentid="1" data-commentnickname="Matt"
                                       th:attr="data-commentid=${comment.id},data-rootid=${comment.id},data-commentnickname=${comment.user.nickname}"
                                       onclick="reply(this)">回复</a>
                                </div>
                            </div>
                            <div class="comments" th:if="${#arrays.length(comment.replyComments)} > 0">
                                <div class="comment" th:each="reply : ${comment.replyComments}">
                                    <a class="avatar">
                                        <img src="https://picsum.photos/id/248/100/100" alt=""
                                             th:src="@{${reply.user.avatar}}">
                                    </a>
                                    <div class="content">
                                        <a class="author">
                                            <span th:text="${reply.user.nickname}">Matt</span>
                                            <div class="ui mini basic red left pointing label m-padded-tb-mini"
                                                 th:if="${reply.user.type} != 10">
                                                <span class="m-color-admin">博主</span>
                                            </div>
                                        </a>
                                        <div class="metadata">
                                    <span class="date"
                                          th:text="|  ${#dates.format(reply.gmtCreate,'yyyy-MM-dd HH:mm:ss')}|">Today at 5:42PM</span>
                                        </div>
                                        <div class="text" th:utext="${reply.content}">
                                            How artistic!How artistic!How artistic!How artistic!
                                        </div>
                                        <div class="actions">
                                            <a class="reply" data-commentid="1" data-commentnickname="Matt"
                                               th:attr="data-commentid=${reply.id},data-rootid=${comment.id},data-commentnickname=${reply.user.nickname}"
                                               onclick="reply(this)">回复</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <!--/*-->
                        <div class="comment">
                            <a class="avatar">
                                <img src="https://picsum.photos/id/238/100/100" alt="">
                            </a>
                            <div class="content">
                                <a class="author">Elliot Fu</a>
                                <div class="metadata">
                                    <span class="date">Yesterday at 12:30AM</span>
                                </div>
                                <div class="text">
                                    <p>This has been very useful for my research. Thanks as well!</p>
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                            <div class="comments">
                                <div class="comment">
                                    <a class="avatar">
                                        <img src="https://picsum.photos/id/239/100/100" alt="">
                                    </a>
                                    <div class="content">
                                        <a class="author">Jenny Hess</a>
                                        <div class="metadata">
                                            <span class="date">Just now</span>
                                        </div>
                                        <div class="text">
                                            Elliot you are always so right :)
                                        </div>
                                        <div class="actions">
                                            <a class="reply">回复</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="comment">
                            <a class="avatar">
                                <img src="https://picsum.photos/id/240/100/100" alt="">
                            </a>
                            <div class="content">
                                <a class="author">Joe Henderson</a>
                                <div class="metadata">
                                    <span class="date">5 days ago</span>
                                </div>
                                <div class="text">
                                    Dude, this is awesome. Thanks so much
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                        </div>
                        <!--*/-->
                    </div>
                </div>
            </div>


        </div>

    </div>
</div>


<!--工具条-->
<!--<div id="toolbar" class="ui vertical icon buttons m-float-bar" style="display: none">-->
<div class="ui vertical icon buttons m-float-bar">
    <button id="toTop-button" class="ui button"><i class="angle up icon"></i></button>
    <button type="button" class="ui catalog button" id="catalogButton">目录</button>
    <a href="#comment-form" class="ui button">留言</a>
    <button class="ui qrcode button"><i class="qrcode icon"></i></button>
    <button class="ui button" data-tooltip="1269670415" data-position="left center"><i class="qq icon"></i></button>
    <button id="toBottom-button" class="ui button"><i class="angle down icon"></i></button>
</div>

<div id="qrcode" class="ui qrcode flowing popup transition hidden" style="width: 130px !important;">
    <!--    <img src="./static/images/bk2.jpeg" alt="" class="ui rounded bordered image" style="width: 120px !important;">-->
</div>

<div class="ui catalog-container top flowing popup transition hidden" style="width: 200px !important">
    <ol class="js-toc">
    </ol>
</div>

<!--底部footer-->
<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">

            <div class="five wide column">
                <div class="ui list">
                    <div class="item">
                        <img src="../static/images/bk1.jpeg" class="ui rounded image" style="width: 140px" alt=""/>
                    </div>
                </div>
            </div>

            <div class="six wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">hello 大家好我是你们的____</a>
                    <a href="#" class="item">说到____相信大家并不陌生</a>
                    <a href="#" class="item">近日一位外国小伙又整了一个____新活</a>
                </div>
            </div>

            <div class="five wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">简介</h4>
                <!--  版本号  -->
                <p class="m-opacity-mini">Version 0.0.1</p>
                <!--  -->
                <p class="inverted m-opacity-mini"> create the value of life </p>
            </div>

        </div>
        <div class="ui inverted section divider">️</div>
        <p class="m-text-thin m-text-spaced m-opacity-mini m-opacity-tiny"> Copyright © 2020 - 2021 Volcreate Designed
            by zxc </p>
    </div>
</footer>


<!----------------JS---------------->
<!--/*/<th:block th:replace="_fragments :: script" >/*/-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script src="../static/lib/scrollTo/jquery.scrollTo.min.js"></script>
<!--    <script src="../static/lib/waypoints/jquery.waypoints.min.js"></script>-->
<script src="../static/lib/prism/prism.js"></script>
<script src="../static/lib/tocbot/tocbot.min.js"></script>
<script src="../static/lib/qrcode/qrcode.min.js"></script>
<script src="../static/js/mine.js"></script>
<!--/*/</th:block>/*/-->

<script th:inline="javascript">
    /*赞赏弹出*/
    $('#payButton').popup({
        popup: $('.payQR.popup'),
        on: 'click',
        position: 'bottom center'
    });

    /*--------------目录--------------*/
    /*目录生成*/
    tocbot.init({
        // Where to render the table of contents.
        tocSelector: '.js-toc',
        // Where to grab the headings to build the table of contents.
        contentSelector: '.js-toc-content',
        // Which headings to grab inside of the contentSelector element.
        headingSelector: 'h1, h2, h3',
        // For headings inside relative or absolute positioned containers within content.
        hasInnerContainers: true,
    });
    /*目录弹出*/
    $('#catalogButton').popup({
        popup: $('.catalog-container.popup'),
        on: 'click',
        position: 'left center'
    });

    /*--------------手机端查看，二维码生成--------------*/
    // var serverUrl = "http://www.volcreate.com";
    var serverUrl = /*[[#{blog.server.url}]]*/"127.0.0.1:8080";
    var urn = /*[[@{/blog/{id}(id=${blog.id})}]]*/"";
    /*二维码生成*/
    var qrcode = new QRCode("qrcode", {
        text: serverUrl + urn,
        width: 100,
        height: 100,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });
    /*二维码弹出*/
    $('.qrcode.button').popup({
        popup: $('.qrcode.popup'),
        position: 'left center'
    });

    /*--------------滑动--------------*/
    /*滑动*/
    $('#toTop-button').click(function () {
        $(window).scrollTo(0, 400)
    });
    $('#toBottom-button').click(function () {
        $(window).scrollTo(document.body.scrollHeight, 400)
    });
    /*滑动监测*/
    // var waypoint = new Waypoint({
    //     element: document.getElementById('waypoint'),
    //     handler: function (direction) {
    //         if (direction == 'down') {
    //             $('#toolbar').show();
    //         } else {
    //             $('#toolbar').hide(500);
    //         }
    //     }
    // })
    //评论表单验证
    $('.ui.form').form({
        fields: {
            content: {
                identifier: 'content',
                rules: [{
                    type: 'empty',
                    prompt: '请输入评论内容'
                }]
            }
        }
    });

    $(function () {
        $('#comment-container').load(/*[[@{/comments/{id}(id=${blog.id})}]]*/"/comment/32");
    })

    $('#comment-submit-btn').click(function () {
        var boo = $('.ui.form').form('validate form');
        if (boo) {
            console.log('校验成功');
            postData();
        } else {
            console.log('校验失败');
        }
    })

    /**
     * #comment-container 为动态加载的区域
     * load的第一个参数为动态加载请求的地址，第二个为提交的数据，第三个为得到请求作出的响应
     * 在jq里: # .  [name=''] 分别代表取id，取class，取name
     */
    function postData() {
        $('#comment-container').load(/*[[@{/comments}]]*/"", {
            /* -- 自动 -- */
            "parentCommentId": $("[name='parentCommentId']").val(),
            "rootCommentId": $("[name='rootCommentId']").val(),
            "blog.id": $("[name='blog.id']").val(),
            "blog.commentable": $("[name='blog.commentable']").val(),
            /* -- 手动 -- */
            "content": $("[name='content']").val()
        }, function (responseTxt, statusTxt, xhr) {
            /*-- 异步请求后将光标定义到评论顶部 --*/
            // $(window).scrollTo($('#comment-container'), 400);
            clearContent();
        });
    }

    function clearContent() {
        $("[name='content']").val('');
        $("[name='parentCommentId']").val(-1);
        $("[name='rootCommentId']").val(-1);
        $("[name='content']").attr("placeholder", "别拦我，我要评论...");
    }

    /*--  使用data方法自定义的变量如data-value data-commentid 在用data函数获取值时可以忽略前面的data- --*/
    /*-- data方法里只能获取小写的值所以不建议使用驼峰命名  --*/
    function reply(obj) {
        var commentId = $(obj).data('commentid');
        var rootCommentId = $(obj).data('rootid');
        var commentNickname = $(obj).data('commentnickname');
        var str = $('#textaream').val(); //先获取原有的值
        $("#textaream").val(str + "@" + commentNickname + " :").focus(); //拼接新值
        /* 点击回复后，设置新的parentComment */
        $("[name='parentCommentId']").val(commentId);
        $("[name='rootCommentId']").val(rootCommentId);
        $(window).scrollTo($('#comment-form'), 400);
    }

    $('#like').click(function () {
        $('#like').removeClass("basic");
    })
    $('#love').click(function () {
        $('#love').removeClass("basic");
    })
    $('#favorite').click(function () {
        $('#favorite').removeClass("basic");
    })

    $(document).ready(function () {// DOM的onload事件处理函数
        $("#like").click(function () {// 当按钮submit被点击时的处理函数
            postLike();// submit别点击时执行postdata函数
        });
    });

    function postLike() {// 提交数据函数
        $.ajax({// 调用jquery的ajax方法
            type: "POST",// 设置ajax方法提交数据的形式
            url: "/blogLike",// 把数据提交到 /blogLike

            /* 必须使用key/value的形式，如"key=value"，
             * 如果多个键值对，就使用&分隔开，
             * 如"key1=value1&key2=value2" */
            data: "like=1" + "&id=" + $("[name='blog.id']").val(),
            success: function (msg) {
                if (msg == "OK") {
                    $('#likeInterval').html("");
                    var cou = parseInt($('#likeCount').html())
                    $('#likeCount').html(cou + 1);
                } else {
                    $('#likeInterval').html("赞的太频繁啦，我想稍后再赞");
                }
            }
        });
    }

</script>

<!----------------JS---------------->
</body>
</html>